<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

  <head>
	<title>Lucar 共享汽车，我们出行</title>
  </head>
  
  <link rel="stylesheet" type="text/css" href="lucar-css/head-css.css" />
  <link rel="stylesheet" type="text/css" href="lucar-css/selectCar-css.css">
  <body>
  	<div id="head">
    	<div id="h-logo">
        	<img src="lucar-image/logo.png" class="hl">
        </div>
        <div id="h-right">
        	<span id="hr-useCar" class="hr-span" onmouseover="headimg(1);" onMouseOut="headimg(2);" onclick="useCar()"/>
            	<img id="uCOut" src="lucar-image/useCar-Out.png" class="hr-image" style="display:block">
            	<img id="uCOn" src="lucar-image/useCar-On.png" class="hr-image" style="display:none">
            </span>
            <span id="hr-aboutUs" class="hr-span" onmouseover="headimg(3);" onMouseOut="headimg(4);">
            	<img id="aUOut" src="lucar-image/aboutUs-Out.png" class="hr-image" style="display:block">
            	<img id="aUOn" src="lucar-image/aboutUs-On.png" class="hr-image" style="display:none">
            </span>
            <span id="register" class="button" onMouseOver="headbutton(1);" onMouseOut="headbutton(2);"><b class="hr-text">注册</b></span>
            <span id="login" class="button" onMouseOver="headbutton(3);" onMouseOut="headbutton(4);"><b class="hr-text">登录</b></span>
        </div>
    </div>
    <%@ page import="java.util.*,car.domain.CarInfo,car.service.*"%>
	<%		request.setCharacterEncoding("utf-8"); 
			String p2=request.getParameter("p");
			int p=1;
			if(p2!=null && !p2.equals("")){
				p=Integer.parseInt(p2);
			}
	%>
	<div id="carTable">
		<table id="t1">
			<tr id="tbt">
				<td class="tb-tittle"><img src="lucar-image/selectCar-image/carTable-image/carImg.png" /></td>
				<td class="tb-tittle"><img src="lucar-image/selectCar-image/carTable-image/carID.png" /></td>
				<td class="tb-tittle"><img src="lucar-image/selectCar-image/carTable-image/carName.png" /></td>
				<td class="tb-tittle"><img src="lucar-image/selectCar-image/carTable-image/carType.png" /></td>
				<td class="tb-tittle"><img src="lucar-image/selectCar-image/carTable-image/power.png" /></td>
				<td class="tb-tittle"><img src="lucar-image/selectCar-image/carTable-image/parting.png" /></td>
				<td class="tb-tittle"><img src="lucar-image/selectCar-image/carTable-image/use.png" /></td>
			</tr>
		</table>
		
		<div id="pageDiv">
			<span id="totalPage">第<%=p %>/共3页</span>
			<a href="selectCar.jsp?&p=1" id="firstPage">首页</a>
			<a id="previousPage" onclick="checkPage(0)">上一页</a>
			<a id="nextPage" onclick="checkPage(1)">下一页</a>
			<a href="selectCar.jsp?&p=3" id="lastPage">尾页</a>
			<input type="text" id="txtPage">
			<img src="lucar-image/selectCar-image/GO.png" id="btnPage" onclick="changePage()" />
		</div>
	</div>
	
  </body>
  
<script src="lucar-script/head-script.js"></script>
<script src="lucar-script/jquery-3.2.1-jquery.min.js"></script>
<script type="text/javascript">
window.onload = function(){
	function box(){
		var oBox = document.getElementById("carTable");
		var L1 = oBox.offsetWidth;
		var Left = (document.documentElement.clientWidth-L1)/2;
		oBox.style.left = Left+'px';
	}
	box();
	window.onresize = function(){
        box();
    }
    $(document).ready(function(){
		$.ajax({
			type:"get",
			url:'<%=basePath%>selectCar.action',
			data:"p=<%=p%>",
			dataType:"json",
			success:function(carList){
				if(carList.length!=0){
					for(var i=0;i<carList.length;i++){
						var carId=carList[i].carId;
						var carName=carList[i].carName;
						var carType=carList[i].carType;
						var power=carList[i].power;
						var parkId=carList[i].parkId;
						var img=100;
						if(power==100.00){
							img=100;
						}else if(power>80.00&&power<100.00){
							img=80;
						}else if(power>60.00&&power<=80.00){
							img=60;
						}else if(power>40.00&&power<=60.00){
							img=40;
						}else if(power>20.00&&power<=40.00){
							img=20;
						}else if(power>10.00&&power<=20.00){
							img=10;
						}
						var str="<tr id='tbi'><td><img class='carImg'></td><td id='td_carId_"+carId+"'>"+carId+"</td><td>"+carName+
						"</td><td><img src='lucar-image/selectCar-image/carType-img/car.png' class='carType' /></td>"+
						"<td><img src='lucar-image/selectCar-image/Power"+img+".png' class='powerImg'/></td>"+
						"<td>"+parkId+"</td>"+
						"<td><img src='lucar-image/selectCar-image/OK.png' class='OKImg' onclick='useCar("+carId+")'/></td></tr>";
						$("#t1").append(str);
					}
				}
			},
			error:function(carList){
			}
		});
	});
}
function checkPage(n){
    var p1=<%=p%>;
    var count2=3;
	if(n==0){
		if(p1==1){
			alert("亲，已是第一页！");
		}else{
			window.location.href="selectCar.jsp?&p=<%=p-1 %>";
		}
	}else if(n==1){
		if(p1==count2){
			alert("亲，已是最后一页！");
		}else{
			window.location.href="selectCar.jsp?&p=<%=p+1 %>";
		}
	}
}
function changePage(){
    var p=document.getElementById("txtPage").value;
    window.location.href="selectCar.jsp?&p="+parseInt(p);
}

function useCar(i){
    var carId=document.getElementById("td_carId_"+i).innerHTML;
	window.location.href="createOrders?&carId="+carId;
}
</script>

</html>